<template>
    <div>
        <div class="radio-item">
            <div class="addr-item plr15 flex-1" v-for="(item,index) in dataList" :key="index" @click="choiceAddr(item)">
                <div class="addr-main flex-column">
                    <p class="item-conn">
                        <span>{{item.name}}</span>
                        &nbsp;<span>{{item.phone}}</span>
                    </p>
                    <p class="item-detail row1">{{item.detail}}</p>
                </div>
                <div class="item-b-set flex-row">
                    <span class="theme-color flex-row flex-1" v-if="item.isDefault">默认地址</span>
                    <div class="item-edit flex-row">
                            <span class="edit flex-row"
                                  @click.stop="$router.push({name:'address-add',query:{info: JSON.stringify(item)}})">
                                <van-icon name="edit"/>
                                <span> 编辑</span>
                            </span>
                        <span class="del flex-row" @click="onDelete(item.id)">
                                <van-icon name="delete"/>
                                <span>删除</span>
                            </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="btn-box ptb10" @click="$router.push({name:'address-add'})">
            <van-button class="btn" size="large">添加地址</van-button>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex"

    export default {
        data() {
            return {
                radio: 1,
                dataList: []
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.historyRouter = from.name
                if (from.name == 'shopping-submit') {
                    vm.$store.commit(types.SET_ADDRESS_RECORD, true)
                }
                if (from.name == 'mine') {
                    vm.$store.commit(types.SET_ADDRESS_RECORD, false)
                }
            })
        },
        computed: {
            ...mapGetters(['addressIsReturn'])
        },
        created() {
            this.getAddressList()
        },
        methods: {
            getAddressList() {
                this.$store.dispatch(types.GET_ADDRESS_LIST).then(res => {
                    console.log(res)
                    if (res.code !== 0) return
                    this.dataList = res.items
                })
            },
            onDelete(id) {
                let that = this
                utils.dialog.confirm({
                    content: "确定删除改地址吗？",
                    confirm: function () {
                        that.$store.dispatch(types.ADDRESS_DEL, {id: id}).then(res => {
                            console.log(res)
                            if (res.code !== 0) return
                            that.getAddressList()
                        })
                    }
                });
            },
            choiceAddr(data) {
                if (this.addressIsReturn) {
                    this.$store.commit(types.SET_ADDRESS_CHOICE, data)
                    this.$router.go(-1)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .addr-main {
        align-items: flex-start;
        justify-content: space-around;
        height: 60px;
        border-bottom: 1px solid #efefef;
        font-size: 14px;

    }

    .addr-item {
        background: #fff;
        margin-bottom: 10px;
    }

    .item-conn {
        font-weight: bold;
        font-size: 14px;
    }

    .item-detail {
        color: #666;
    }

    .item-b-set {
        height: 30px;
        font-size: 13px;
        justify-content: flex-end;
    }

    .item-edit span span {
        padding: 0 5px;
    }

    .edit {
        padding-right: 5px;
    }
</style>